<template>
  <view>
    <!-- 商业写字楼按揭  -->
    <commonWin></commonWin>
    <view class="top tac fw">
      <text>请完善</text>
      <text class="color">基本信息</text>
    </view>
    <view class="messageBar fz12">
      <view class="disb aic" @click="click(1)">
        <text>房产所在区域</text>
        <view class="select disp aic" style="font-weight: 700">
          <text class="color10">{{ house.area ? house.area : '请选择' }}</text>
          <image src="../../static/images/preat/right.png" mode=""></image>
        </view>
      </view>
    </view>

    <view class="messageBar fz12">
      <view class="disb aic" @click="click(3)">
        <text>土地性质</text>
        <view class="select disp aic" style="font-weight: 700">
          <text class="color10">{{ house.landStatus ? house.landStatus : '请选择' }}</text>
          <image src="../../static/images/preat/right.png" mode=""></image>
        </view>
      </view>
    </view>

    <view class="messageBar fz12">
      <view class="disb aic" @click="click(6)">
        <text>房产所在楼层</text>
        <view class="select disp aic" style="font-weight: 700">
          <text class="color10">{{ house.locationFloor ? house.locationFloor : '请选择' }}</text>
          <image src="../../static/images/preat/right.png" mode=""></image>
        </view>
      </view>
    </view>

    <view class="messageBar fz12">
      <view class="disb aic">
        <text>租金单价（空置或清水可参考同楼层其他租金）</text>
        <view class="select disp aic" style="font-weight: 700">
          <u-input
              type="digit"
              maxlength="12"
              placeholder="请输入"
              inputAlign='right'
              border='none'
              v-model="house.rent"
          ></u-input>
          <text> 元/㎡</text>
        </view>
      </view>
    </view>


    <view class="messageBar fz12">
      <view class="disb aic">
        <text>建筑面积</text>
        <view class="select disp aic" style="font-weight: 700">
          <u-input
              maxlength="12"
              type='digit'
              placeholder="请输入"
              inputAlign='right'
              border='none'
              v-model="house.areaOfStructure"
          ></u-input>
          <text>㎡</text>
        </view>
      </view>
    </view>

    <view class="messageBar fz12">
      <view class="disb aic" @click="click(8)">
        <text>首套/二套</text>
        <view class="select disp aic" style="font-weight: 700">
          <text class="color10">{{ house.oneOrTwo ? house.oneOrTwo : '请选择' }}</text>
          <image src="../../static/images/preat/right.png" mode=""></image>
        </view>
      </view>
    </view>

    <!--		<view class="messageBar fz12">-->
    <!--			<view class="disb aic" @click="click(2)">-->
    <!--				<text>房屋结构</text>-->
    <!--				<view class="select disp aic" style="font-weight: 700">-->
    <!--					<text class="color10">{{house.buildingStructure?house.buildingStructure:'请选择'}}</text>-->
    <!--					<image class="image" src="../../static/images/preat/right.png" mode=""></image>-->
    <!--				</view>-->
    <!--			</view>-->
    <!--		</view>-->

    <!--		<view class="messageBar fz12">-->
    <!--			<view class="disb aic" @click="click(4)">-->
    <!--				<text>房屋类型</text>-->
    <!--				<view class="select disp aic" style="font-weight: 700">-->
    <!--					<text class="color10">{{house.houseType?house.houseType:'请选择'}}</text>-->
    <!--					<image src="../../static/images/preat/right.png" mode=""></image>-->
    <!--				</view>-->
    <!--			</view>-->
    <!--		</view>-->

    <!--		<view class="messageBar fz12">-->
    <!--			<view class="disb aic" @click="click(5)">-->
    <!--				<text>是否临街</text>-->
    <!--				<view class="select disp aic" style="font-weight: 700">-->
    <!--					<text class="color10">{{house.isFrontage?house.isFrontage:'请选择'}}</text>-->
    <!--					<image src="../../static/images/preat/right.png" mode=""></image>-->
    <!--				</view>-->
    <!--			</view>-->
    <!--		</view>-->

    <!--		<view class="messageBar fz12">-->
    <!--			<view class="disb aic" @click="click(7)">-->
    <!--				<text>是否带租约</text>-->
    <!--				<view class="select disp aic" style="font-weight: 700">-->
    <!--					<text class="color10">{{house.isLease?house.isLease:'请选择'}}</text>-->
    <!--					<image src="../../static/images/preat/right.png" mode=""></image>-->
    <!--				</view>-->
    <!--			</view>-->
    <!--		</view>-->


    <u-picker :show="show" :immediateChange="true" :columns="list" keyName="category" @confirm="sexSelect" @cancel='show=false'
              closeOnClickOverlay @close='show=false'></u-picker>
    <view class="upBtn tac colorf" @click="toSee">提交</view>
  </view>
</template>

<script>
import {
  getCommercialBuildingMortgage,
  setCommercialBuildingMortgage,
  upDateCommercialBuildingMortgage
} from "../../api/information.js"
import commonWin from "./commonWin.vue";

export default {
  name: "informtionList",
  components: {commonWin},
  props: {
    flag: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    isThis: {
      type: Number,
      default: () => {
        return ''
      }
    },
    pid: {
      type: String,
      default: () => {
        return ''
      }
    },
    ui: {
      type: String,
      default: () => {
        return "0"
      }
    },
    listId: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      show: false,
      select: null,
      status: false,
      house: {
        userId: uni.getStorageSync('userInfo').id,
        area: "",
        buildingStructure: "",
        houseType: "",
        landStatus: '',
        areaOfStructure: "",
        locationFloor: "",
        oneOrTwo:"",
        isFrontage: "",
        isLease: "",
        rent: ""
      },
      list: []
    };
  },
  onReady() {
    if (this.isThis == 10) {
      if (this.listId) {
        this.getMessage()
      }
    }
  },
  methods: {
    // 获取是否填写保单资料
    getMessage() {
      getCommercialBuildingMortgage({id: this.listId, ui: this.ui}).then(res => {
        this.house = res.data
      })
    },
    //提交
    toSee() {
      if (this.listId) {
        this.house.id = this.listId
        uni.$u.toast('资料提交中...')
        upDateCommercialBuildingMortgage(this.house).then(res => {
          if (res.code == 0) {
            uni.$u.toast('保存成功')
            setTimeout(() => {
              uni.navigateBack()
            }, 500)
          } else {
            uni.$u.toast(res.msg)
          }
        })
      } else {
        uni.$u.toast('资料提交中...')
        setCommercialBuildingMortgage(this.house).then(res => {
          if (res.code == 0) {
            if (this.flag) {
              uni.navigateTo({
                url: `/pages/category/testLimit?id=&type=1&tableId=0`
              })
            } else {
              uni.navigateTo({
                url: `/pages/category/testLimit?id=${this.pid}&type=0&tableId=` + res.data
              })
            }
          } else {
            uni.$u.toast(res.msg)
          }
        })
      }
    },
    //选择
    click(i) {
      this.show = true
      this.select = i
      if (i == 1) {
        this.list = [['临街', '小区内', '园区', '景区', '其他']]
      }
      if (i == 2) {
        this.list = [['钢筋混凝土结构', '混合结构']]
      }
      if (i == 3) {
        this.list = [['出让地', '划拨地', '工业用地']]
      }
      if (i == 4) {
        this.list = [['商住楼', '商业', '写字楼']]
      }
      if (i == 5) {
        this.list = [['是', '否']]
      }
      if (i == 6) {
        this.list = [['1楼', '2楼', '3楼', '4楼', '5楼', '6楼', '7楼', '8楼', '9楼', '10楼', '11楼', '12楼', '13楼', '14楼', '15楼', '16楼', '17楼', '18楼', '19楼',
          '20楼', '21楼', '22楼', '23楼', '24楼', '25楼', '26楼', '27楼', '28楼', '29楼', '30楼', '30楼以上']]
      }
      if (i == 7) {
        this.list = [['是', '否']]
      }
      if (i == 8) {
        this.list = [['首套', '二套']]
      }
    },
    //确认选择
    sexSelect(e) {
      this.show = false
      if (this.select == 1) {
        this.house.area = e.value[0]
      }
      if (this.select == 2) {
        this.house.buildingStructure = e.value[0]
      }
      if (this.select == 3) {
        this.house.landStatus = e.value[0]
      }
      if (this.select == 4) {
        this.house.houseType = e.value[0]
      }
      if (this.select == 5) {
        this.house.isFrontage = e.value[0]
      }
      if (this.select == 6) {
        this.house.locationFloor = e.value[0]
      }
      if (this.select == 7) {
        this.house.isLease = e.value[0]
      }
      if (this.select == 8) {
        this.house.oneOrTwo = e.value[0]
      }
    }
  }
}
</script>

<style lang="scss">
.top {
  line-height: 80rpx;
  background-color: #eaf3ff;
}

.messageBar {
  min-height: 80rpx;
  line-height: 80rpx;
  padding: 0 30rpx;
  margin-bottom: 10rpx;
  background-color: #fff;

  .select {
    image {
      width: 20rpx;
      height: 30rpx;
      margin-left: 10rpx;
    }
  }
}

.upBtn {
  width: 80%;
  line-height: 80rpx;
  border-radius: 40rpx;
  background-color: #0055ff;
  margin: 40rpx auto 20rpx;
}
</style>